<route>
    {
        meta: {
            title: "创建个人文件夹"
        }
    }
    </route>

<script setup name="personalFileArt">
import useFileStore from '@/store/modules/file'
import { nextTick, ref } from 'vue'
import { ElInput } from 'element-plus'
const route = useRoute()
const router = useRouter()
const text = ref('')

const fileStore = useFileStore()

const formRef = ref()
const form = ref({
    name: ''
})
// 规则
const rules = ref({
    name: [
        { required: true, message: '请输入文件夹名称', trigger: 'blur' }
    ]
})

function onSubmit() {
    formRef.value.validate(valid => {
        if (valid) {
          let obj = {
            parentId: route.query.id,
            name: form.value.name + '.md'
          }
          fileStore.createArticle(obj).then(res => {
            ElMessage({
              type: 'success',
              message: '新建成功'
            })
            router.push({
              name: 'personalExampleIndex'
            })
          })
        }
    })
}

function onCancel() {
    router.go(-1)
}
</script>

<template>
    <div>
        <page-main>
            <el-row>
                <el-col>
                    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="文章名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入文章名称" />
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </page-main>
        <fixed-action-bar>
            <el-button type="primary" size="large" @click="onSubmit">新建</el-button>
            <el-button type="primary" size="large" @click="onCancel">取消</el-button>
        </fixed-action-bar>
    </div>
</template>
